<template>
  <div class="app_config_box">
    <el-form :model="appConfig" ref="appForm" label-width="40px" size="mini">
      <el-row>
        <el-col :span="24">
          <el-form-item label="名称">
            <el-input v-model="appConfig.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="描述">
            <el-input
              type="textarea"
              :rows="19"
              v-model="appConfig.description"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 确认取消公共组件 -->
    <top-operation-button
      @submit="submitForm('appForm')"
      @handClose="$emit('closeSetting')"
    />
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex";
import TopOperationButton from "./CommonComponents/TopOperationButton";
import { base64EncodeUnicode } from "@/utils/utils";
import { edgeExistFile, edgeGetCode, edgeWrite } from "@/api/siddhi";

export default {
  components: {
    TopOperationButton,
  },
  name: "appConfig",
  props: {
    nodeDataRight: {
      type: Object,
      default: () => {},
    },
  },

  data() {
    return {
      appConfig: { name: "", description: "" },
      activeTabNew: {},
      lastName: "",
      siddhiSuffixes: ".siddhi",
    };
  },
  computed: {
    // ...mapState('siddhi',['appConfig'])
    ...mapGetters(["activeTab", "ediEdgeTabs"]),
    appName() {
      return this.activeTab.name;
    },
  },
  methods: {
    async existFileInPath(param) {
      return new Promise(async (resolve, reject) => {
        await edgeExistFile(param)
          .then((res) => {
            if (res.data) {
              resolve(res.data.exists);
            }
          })
          .catch((Error) => {
            console.log(Error);
          });
      });
    },
    // ...mapActions("siddhi", ["setAppconfig"]),
    submitForm(formName) {
      let that = this;
      that.$refs[formName].validate(async (valid) => {
        if (valid) {
          let tempFileName = base64EncodeUnicode(
            this.appConfig.name + that.siddhiSuffixes
          );
          let param = "configName=" + tempFileName;
          let exists = await that.existFileInPath(param);
          if (exists) {
            this.$confirm(
              "工作空间中已经存在名称为:" +
                this.appConfig.name +
                "的文件，请确认是否替换?",
              "提示",
              {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              }
            )
              .then(() => {
                that.writeSiddhi(this.appConfig.name);
              })
              .catch(() => {
                this.$msg({
                  type: "info",
                  message: "已取消替换,请重新命名,保存后即创建新文件",
                });
              });
            return false;
          } else {
            that.writeSiddhi(this.appConfig.name);
          }

          //更新菜单
          // this.$store.dispatch("siddhi/loadWorkspaceTree");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async writeSiddhi(currentfileName) {
      this.$store.dispatch("siddhi/writeSiddhi", this.appConfig).then((res) => {
        if (res) {
          this.$emit("closeSetting");
        }
      });
      // that.activeTab.siddhiJson = that.objectJson;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted() {
    this.appConfig.name = this.appName;
  },
};
</script>

<style scoped>
.app_config_box {
  padding: 20px;
  height: 80vh;
  overflow: scroll;
  overflow-x: hidden;
}
</style>
